<template>
  <view class="box">
    <view class="top">
        <view class="box1">
          <view class="box1-top">
            <span class="one boxone">1</span>
          </view>
          <view class="box1-bottom">
            <span class="text textone">债务状态</span>
          </view>
          <view class="line lineone"></view>
        </view>
        <view class="box2">
          <view class="box2-top">
            <span class="one boxtow">2</span>
          </view>
          <view class="box2-bottom">
            <span class="text texttow">债务类型</span>
          </view>
          <view class="line linetow"></view>
        </view>
        <view class="box3">
          <view class="box3-top">
            <span class="one boxthree">3</span>
          </view>
          <view class="box3-bottom">
            <span class="text textthree">债务金额</span>
          </view>
          <!-- <view class="line linethree"></view> -->
        </view>
    </view>
    <view class="mid">
      <view class="mid-top">
        <span class="mid-top-text">请选择您的债务类型</span>
        <span class="mid-bottom-text">(房贷、车贷、征信修复、个人债务不受理)</span>
      </view>
      <view class="mid-button-list">
        <view class="mid-button" v-for="(value, key, index) in typelist" key="index" >
          <view class="lower"></view>
          <view class="upper">
            <span class="upper-text">{{ value }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="next-button" @click="next">下一步</view>
    </view>
  </view>
  
</template>

<script lang="ts" setup>
const typelist = ["信用卡逾期", "网贷逾期", "两者都有"]
const next = () => {
  uni.navigateTo({
    url:'/pages/amountof-debt/amountof-debt'
  })
}
</script>

<style lang="scss" scoped>
.box {
  width: 375px;
  height: 787px;
  background: #fffaec;
  border-radius: 10px 10px 0px 0px;
  .one {
          position: relative;
          width: 10px;
          height: 18px;
          top: 10px;
          left: 14px;
          // background: #545050;
          font-size: 18px;
          font-family: PingFang SC, PingFang SC-500;
          font-weight: 500;
          text-align: LEFT;
          color: #545050;
          line-height: 19px;
        }
  .text {
    position: relative;
    width: 73px;
    height: 22px;
    top: 10px;
    left: -8px;
    // background: #000000;
    font-size: 13px;
    font-family: Inter, Inter-400;
    font-weight: 400;
    text-align: CENTER;
    color: #949090;
    line-height: 15px;
  }
  .lower {
      position: absolute;
      // display: inline-block;
      // top: 20px;
      width: 123px;
      height: 42px;
      background: #f2bb16;
      border-radius: 10px;
      box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    }

  .upper {
      position: relative;
      width: 123px;
      height: 42px;
      // top: -20px;
      bottom: 4px;
      right: 3px;
      background: #fae4a0;
      border-radius: 10px;

      .upper-text {
        position: absolute;
        top: 12px;
        left: 23px;
        width: 83px;
        height: 18px;
        font-size: 16px;
        font-weight: 550;
        color: #000000;
        line-height: 19px;
      }
    }
  .top {
    width: 100%;
    .box1 {
      position: absolute;
      left: 65px;
      top: 20px;
      // width: 75px;
      // height: 75px;
      // display: inline-block;
      .box1-top {
        width: 40px;
        height: 40px;
        background: #d9d9d9;
        border-radius: 50%;
      }
    }
    .box2 {
      position: absolute;
      left: 160px;
      top: 20px;
      .box2-top {
        width: 25px;
        height: 25px;
        border: 7px solid #f2bd20;
        border-radius: 50%;
        .boxtow {
          top: 3px;
          left: 7px;
        }
      }
      .box2-bottom {
        .texttow {
          width: 73px;
          height: 22px;
          // background: #949090;
          font-size: 13px;
          font-family: Inter, Inter-400;
          font-weight: 400;
          text-align: CENTER;
          color: #000000;
          line-height: 15px;
        }
      }
    }
    .box3 {
      position: absolute;
      left: 260px;
      top: 20px;
      .box3-top {
        width: 40px;
        height: 40px;
        background: #d9d9d9;
        border-radius: 50%;
        .boxthree {
          top: 10px;
          left: 14px;
        }
      }
      .box3-bottom {
        .textthree {
          width: 73px;
          height: 22px;
          // background: #949090;
          font-size: 13px;
          font-family: Inter, Inter-400;
          font-weight: 400;
          text-align: CENTER;
          color: #949090;
          line-height: 15px;
        }
      }
    }
    .line {
      // display: inline-block;
      position: relative;
      // top: 1px;
      bottom: 43px;
      left: 50px;
      width: 35px;
      height: 0px;
      border-bottom: 3px solid #cdcdcd;
    }
  }
  .mid {
    .mid-top {
      .mid-top-text {
        position: absolute;
        top: 150px;
        left: 20px;
        width: 320px;
        height: 77px;
        font-size: 20px;
        font-family: Inter, Inter-700;
        font-weight: 700;
        text-align: center;
        color: #4a4848;
        line-height: 23px;
      }
      .mid-bottom-text {
        position: absolute;
        top: 190px;
        left: 43px;
        width: 100%;
        height: 17px;
        font-size: 14px;
        font-family: Inter, Inter-400;
        font-weight: 400;
        text-align: LEFT;
        color: #949090;
        line-height: 15px;
      }
    }
    .mid-button-list {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      .mid-button {
        position: relative;
        top: 200px;
        // margin-left: 46px;
        left: 125px;
        padding-top: 50px;
      }
      // .last-bottun {
      //   margin-top: 45px;
      // }
    }
  }
  .bottom {
    .next-button {
      margin-top: 300px;
      margin-left: 164rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 410rpx;
      height: 70rpx;
      background: #f2bb16;
      border-radius: 40rpx;
      font-size: 15px;
      color: #ffffff;
      font-weight: 400;
    }
  }
}
</style>